<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${session.lang == 'en' ? menu.titleEn : menu.title}"></title>
    <meta name="keywords" th:content="${companyProfile.seoKeyword}">
    <meta name="description" th:content="${companyProfile.seoDescription}">
    <link rel="Shortcut Icon" href="/favicon.ico"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/statics/css/contact.css">
    <link rel="stylesheet" href="/statics/css/nrd.css">
    <link rel="stylesheet" href="../statics/css/amazeui.min.css">
    <link rel="stylesheet" href="../statics/css/animate.css">
    <link rel="stylesheet" href="../statics/css/layout.css">
    <link rel="stylesheet" href="../statics/css/pages.css">
    <link rel="stylesheet" href="../statics/iconfont/iconfont.css">
    <link rel="stylesheet" href="../statics/css/demo.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../statics/css/venobox/venobox.css" type="text/css" media="screen"/>
    <script src="../statics/js/jquery-1.11.0.min.js"></script>
    <script src="../statics/js/amazeui.min.js"></script>
    <script src="../statics/js/amazeui.lazyload.min.js"></script>
    <script type="text/javascript" src="../statics/js/venobox/venobox.min.js"></script>
</head>

<body>
<style>
    table {
        margin: 0px auto;
    }

    .message-icon {
        position: fixed;
        left: 10px;
        bottom: 40px;
        width: 50px;
        height: 50px;
        z-index: 99;
        display: none;
    }

    .message-icon img {
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .message {
        width: 240px;
        position: fixed;
        left: 10px;
        bottom: 40px;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        overflow: hidden;
        background: #fff;
        display: block;
        z-index: 100;
    }

    .message .title {
        height: 46px;
        line-height: 46px;
        background: #4e6ef2;
        padding-left: 10px;
        font-size: 14px;
        color: #fff;
    }

    .message .title span {
        margin-left: 6px;
        font-size: 12px;
    }

    .message .title .minue-icon {
        height: 100%;
        display: block;
        float: right;
        padding-right: 10px;
        cursor: pointer;
    }

    .message .message-box {
        padding: 10px;
    }

    .message .message-content {
        width: 100%;

    }

    .message .message-content textarea {
        display: block;
        width: 100%;
        outline: none;
        border: none;
        padding: 0 10px;
        box-sizing: border-box;
        color: #000;
        font-size: 14px;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
    }

    .message-placeholder::placeholder {
        font-size: 12px;
        color: #999;
        font-family: '黑体';
        font-weight: normal;
    }

    .message .message-tel {
        height: 40px;
        margin-top: 10px;
        position: relative;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
    }

    .message .message-tel i {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
        font-size: 14px;
        color: #999;
    }

    .message .message-tel input {
        border: none;
        outline: none;
        display: block;
        width: 100%;
        height: 100%;
        color: #000;
        font-size: 14px;
        padding: 0 10px;
        box-sizing: border-box;
        padding-left: 36px;
    }

    .message .submit {
        width: 100%;
        height: 40px;
        background: #fff;
        border-radius: 5px;
        margin: 10px 0 20px;
        overflow: hidden;
    }

    .message .submit input {
        display: block;
        width: 100%;
        height: 100%;
        background: transparent;
        font-size: 14px;
        transition: all .4s;
        background: #4e6ef2;
        color: #fff;
    }

    .entry-item {
        background: #f2f2f2;
        width: 48%;
        margin-right: 4%;
        height: 88px;
        line-height: 88px;
        text-align: center;
        display: block;
        font-size: 30px;
        color: #3a3a3a;
        float: left;
        transition: all .4s;
    }
    @media (max-width: 768px) {
        .recruit-banner {
            height: 400px;
        }
        .am-slider-i2 .am-slider-images {
            min-height: 0 !important;
            height: 400px !important;
        }
        .am-slider-i2 .am-slider-desc {
            top: 50% !important;
        }
    }
    @media (min-width:992px) {
        .recruit-banner {
            padding-top: 90px;
        }
    }
</style>
<div th:replace="header :: header"></div>

<div data-am-widget="slider" class="am-slider am-slider-i2 recruit-banner" data-am-flexslider="{controlNav:false}">
    <div class="am-slides">
        <div class="am-slider-images" th:style="'background-image: url(' + ${menu.bgImage} + ');'">
            <div class="am-container am-slider-desc">
                <div class="am-slider-content">
                    <h3 class="up-en am-slider-title am-animation-slide-left" data-am-scrollspy="{animation: 'slide-left', delay: 100}" style="color:#fff;">
                        <th:block th:text="${menu.title}"></th:block>
                    </h3>
                    <h3 data-am-scrollspy="{animation:'slide-right', delay: 500}" class="up-cn am-animation-slide-right" style="color:#fff;">
                        <th:block th:text="${menu.titleEn}"></th:block>
                    </h3>
                    <i data-am-scrollspy="{animation:'slide-bottom', delay: 700}" class="am-animation-slide-bottom" style="background:#fff;"></i>
                    <div data-am-scrollspy="{animation:'slide-left', delay: 1200}" class="rb-bantxt am-animation-slide-right" style="color:#fff;">
                        <th:block th:text="${session.lang == 'en' ? menu.descriptionEn : menu.description}"></th:block>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="contact_a">
    <div class="wrap">
        <div class="title wow fadeInUp_qs50 " ms="ms">
            您可以通过以下方式联系到我们
        </div>
        <div class="st wow fadeInUp_qs50 " ms="ms">
            如果您对我公司及我们的产品感兴趣，欢迎到我公司或者我公司当地办事处来勘察，您也可以通过在线咨询，需求表单提交，发送电子邮件，拨打咨询电话等方式与我们取得沟通!
        </div>
        <div class="lx-box clearfix">
            <div class="box wow fadeInUp_qs50 " ms="ms">
                <div class="icon">
                    <div class="icon-group">
                        <img src="/statics/images/about-us/tel-2.png" alt="">
                        <img src="/statics/images/about-us/tel-1.png" alt="">
                    </div>
                </div>
                <div class="text-box">
                    <div class="tl">服务热线</div>
                    <div class="te" th:text="${companyProfile.tel}"></div>
                </div>
            </div>
            <div class="box wow fadeInUp_qs50 " ms="ms">
                <div class="icon">
                    <div class="icon-group">
                        <img src="/statics/images/about-us/address-2.png" alt="">
                        <img src="/statics/images/about-us/address-1.png" alt="">
                    </div>
                </div>
                <div class="text-box">
                    <div class="tl">公司地址</div>
                    <div class="te" th:text="${session.lang == 'en' ? companyProfile.addressEn : companyProfile.address}"></div>
                </div>
            </div>
            <div class="box wow fadeInUp_qs50 " ms="ms">
                <div class="icon">
                    <img th:src="${companyProfile.weixin}" alt="">
                </div>
                <div class="text-box">
                    <div class="tl">官方微信</div>
                    <div class="te">微信服务平台</div>
                </div>
            </div>
            <div class="box wow fadeInUp_qs50 " ms="ms">
                <div class="icon">
                    <div class="icon-group">
                        <img src="/statics/images/about-us/email2.png" alt="">
                        <img src="/statics/images/about-us/email1.png" alt="">
                    </div>
                </div>
                <div class="text-box">
                    <div class="tl">邮箱</div>
                    <div class="te" th:text="${companyProfile.email}"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="map"></div>
<div class="amz-container rb-hg80"></div>
<input type="hidden" id="name1" th:value="${session.lang == 'en' ? companyProfile.nameEn : companyProfile.name}">
<input type="hidden" id="address1" th:value="${companyProfile.address}">
<div th:replace="message :: message"></div>

<!--#include file="/public/html/footer.html"-->
<div th:replace="footer :: footer"></div>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=EVwdfOssQ6PhrFF9ld5Gfz62lA69L4vr"></script>

<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap() {
        createMap(); //创建地图
        setMapEvent(); //设置地图事件
        addMapControl(); //向地图添加控件
        addMapOverlay(); //向地图添加覆盖物
    }

    function createMap() {
        map = new BMap.Map("map");
        // 121.274691, 31.027781    113.931331,22.771451
        map.centerAndZoom(new BMap.Point(113.931331, 22.771451), 18);
    }

    function setMapEvent() {
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.enableDragging();
        map.enableDoubleClickZoom()
    }

    function addClickHandler(target, window) {
        target.addEventListener("click", function () {
            target.openInfoWindow(window);
        });
    }

    function addMapOverlay() {
        var markers = [{
            content: $("#address1").val(),
            title: $("#name1").val(),
            imageOffset: {
                width: -46,
                height: -21
            },
            position: {
                lat: 22.771451,
                lng: 113.931331
            }
        }];
        for (var index = 0; index < markers.length; index++) {
            var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
            var marker = new BMap.Marker(point, {
                icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {
                    imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
                })
            });
            var label = new BMap.Label(markers[index].title, {
                offset: new BMap.Size(25, 5)
            });
            var opts = {
                width: 200,
                title: markers[index].title,
                enableMessage: false
            };
            var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
            marker.setLabel(label);
            addClickHandler(marker, infoWindow);
            map.addOverlay(marker);
        }
        ;
    }

    //向地图添加控件
    function addMapControl() {
        var scaleControl = new BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
        map.addControl(scaleControl);
        var navControl = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(navControl);
        var overviewControl = new BMap.OverviewMapControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen: true
        });
        map.addControl(overviewControl);
    }

    var map;
    initMap();
    $('.message-icon').on('click', function () {
        $('.message').css('display', 'block')
        $(this).css('display', 'none')
    })
    $('.minue-icon').on('click', function () {
        $('.message').css('display', 'none')
        $('.message-icon').css('display', 'block')
    })
</script>
</body>
</html>